<template>
	<block v-if="list.length === 0">
		<view class="flex align-center justify-center text-light-muted" style="height: 200rpx;">暂无数据...</view>
	</block>
	<block v-else>
		<view style="padding: 0 15rpx;">
			<view class="" v-for="(item,index) in list" :key="index">
				<view class="flex py-2 px-1 align-center border-bottom" @tap="open(item.id)">
					<image :src="item.cover+'/small'" mode="aspectFill" class="rounded-lg mx-2 flex-shrink"
						style="width: 250rpx; height: 160rpx;"></image>
					<view class="flex-1">
						<view class="text-ellipsis-2 font mb-1 pr-1">{{item.title}}</view>
						<view class="font-sm text-light-muted mb-1">{{$Time.gettime(item.created_time)}}</view>
						<view class="flex text-light-muted mb-1 justify-between align-center">
							<view class="flex align-center">
								<text class="iconfont iconbofangshu font-md mr-1"></text>
								<text class="font-sm">{{$Time.getCounts(item.play_count)}}</text>
								<text class="iconfont icondanmushu font-md mx-1"></text>
								<text class="font-sm">{{$Time.getCounts(item.danmu_count)}}</text>
							</view>
							<text class="font-sm text-danger font-weight-bold">{{item.status===1?'':(item.status===0?'待审核':'已禁用')}}</text>
							<text class="iconfont icongengduo"></text>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-center text-center text-muted font" style="height: 100rpx;">
					<view class="flex-1" style="height: 100rpx;line-height: 100rpx;" hover-class="bg-hover-light"
					@click="edit(item.id)">修改</view>
					<view class="flex-1" style="height: 100rpx;line-height: 100rpx;" hover-class="bg-hover-light"
					@click="goVideoList(item.id)">视频（{{item.detail_count}})</view>
					<view class="flex-1" style="height: 100rpx;line-height: 100rpx;" hover-class="bg-hover-light"
					@click="del(item.id)">删除</view>
				</view>
				<!-- 分割线 -->
				<view class="f-divider"></view>
			</view>
			<!-- 上拉加载更多 -->
			<view class="flex align-center justify-center font text-secondary" 
			style="height: 50px;" hover-class="bg-light">{{nomore?'我是有底线的':'上滑加载更多'}}</view>
		</view>
	</block>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				page:1,
				list:[],
				nomore:false,//判断是否还有更多数据
				video_id:0,
				loading:false,//页面级全局loading变量
			}
		},
		onLoad() {
			this.getData(false);
		},
		// 此处进行对列表数据的单个刷新,不刷新整个列表
		onShow() {
			//console.log('video_id',this.video_id);
			this.video_refresh()
		},
		computed:{
			...mapState({
				user_id:state=>{
					return state.user ? state.user.id : 0
				}
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.nomore = false;
			this.getData().finally(()=> {
				uni.stopPullDownRefresh();
			});
		},
		// 触底加载更多
		onReachBottom() {
			if(!this.nomore){
				this.page++;
				this.getData();
			}
		},
		methods: {
			open(id){
				uni.navigateTo({
					url:'../video-detail/video-detail?id='+id
				})
			},
			// 删除视频
			del(id){
				uni.showModal({
					title:'确定删除吗？',
					success: (r) => {
						if(r.confirm){
							this.$H.post('/video/destroy',{id},{token:true}).then(res=>{
								// 【特别注意】：此处列表进行无刷新删除的方法
								let index = this.list.findIndex(item=>{
									return item.id === id
								})
								if(index > -1){
									this.list.splice(index,1);
								}
								uni.showToast({
									title:'作品删除成功'
								})
								
							}).catch(err=>{
								console.log(err);
								uni.showToast({
									title:'作品删除失败：'+err
								})
							})
						}
					}
				})
			},
			video_refresh(){
				//console.log('this.video_id=',this.video_id);
				if(this.video_id > 0){
					let video = this.list.find(item=>{
						return item.id === this.video_id
					})
					let url = `/video/${this.video_id}/edit`
					this.$H.get(url,{token:true}).then(res=>{
						video.cover = this.$H.common.sourceUrl + res.cover;
						video.title = res.title;
						video.category_id = res.category_id;
						video.description = res.description;
						video.detail_count = res.video_details.length;
					})
				}
			},
			edit(video_id){
				this.video_id = video_id;
				uni.navigateTo({
					url: '/pages/create/create?id='+video_id,
				});
			},
			goVideoList(video_id){
				this.video_id = video_id;
				uni.navigateTo({
					url: '/pages/video-list/video-list?id='+video_id,
				});
			},
			getData(showToast=true){
				uni.showLoading();
				this.loading = true;
				let url = `/video_list/${this.page}?user_id=${this.user_id}`
				return this.$H.get(url).then(res=>{
					//console.log(res);
					if(res.length < 10){
						this.nomore = true
					}
					// 需要将所有cover，加上服务器地址
					res.forEach(item=>{
						item.cover = this.$H.common.sourceUrl + item.cover; 
					})
					if(showToast){
						uni.showToast({
							title:'数据获取成功',
							icon:'none'
						});
						this.loading = false;
					}
					if(this.page > 1){
						if(res.length > 0){
							this.list = [...this.list, ...res];
						} else {
							this.page--;
							if(showToast){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
								this.loading = false;
							}
						}
					} else {
						this.list = res;
					}
				}).catch(err=>{
					console.log(JSON.stringify(err));
					if(this.page > 1){
						this.page--;
					}
				}).finally(()=> {
					if(this.loading){
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style>

</style>
